<template>
	<view class="askfor-detail-container">
		<view class="detail">

			<view class="title">
				<u-image :src="'https://www.gzzyue.com/prod-api/'+leaveInfo.imgavater" radius="15"></u-image>
			</view>
			<view class="info">
				<view class="info-item">班级：{{ leaveInfo.classs }}</view>
				<view class="info-item">请假开始时间：{{ leaveInfo.leaveTimeStart }}</view>
				<view class="info-item">请假结束时间：{{ leaveInfo.leaveTimeEnd }}</view>
				<view class="info-item" v-html="'请假说明：'+leaveInfo.leaveDetailes"></view>
				<view class="info-item">老师电话：{{ leaveInfo.usersNickTelephone }}</view>
				<view class="info-item">学生姓名：{{ leaveInfo.studentName }}</view>
				<view class="info-item">学生电话：{{ leaveInfo.studentTelephone }}</view>
				<view class="info-item">发病症状：{{ leaveInfo.onsetSymptoms }}</view>
				<view class="info-item">诊断疾病：{{ leaveInfo.diagnose }}</view>
				<view class="info-item">诊断日期：{{ leaveInfo.diagnosisTime }}</view>
				<view class="info-item">发病日期：{{ leaveInfo.morbidityTime }}</view>
				<view class="info-item">请假类型：{{ leaveInfo.leaveType === 1 ? '事假' : '病假' }}</view>
				<view class="info-item">离校状态：{{ leaveInfo.state === 1 ? '已离校' : '未离校' }}</view>
				<view class="info-item">删除状态：{{ leaveInfo.isDetele === 1 ? '未删除' : '已删除' }}</view>
			</view>

			<!-- <view class="stauts">
				<u-tag :text="leaveInfo.isDetele === '1' ? '未删除' : '已删除'" :type="leaveInfo.isDetele===1?'success':'error'">
				</u-tag>
			</view> -->
		</view>


		<view class="state-info">
			<u-button :text="leaveInfo.isDetele === 1 ? '未删除' : '已删除' " :type="leaveInfo.isDetele===1?'success':'error'" @click="changeState(leaveInfo.isDetele)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				leaveInfo: {
					// classs:'',
					// id: '',
					// leaveTimeStart: '',
					// leaveTimeEnd: '',
					// leaveDetailes: '',
					// usersNickTelephone: '',
					// studentName: '',
					// studentTelephone: '',
					// onsetSymptoms: '',
					// diagnose: '',
					// diagnosisTime: '',
					// morbidityTime: '',
					// leaveType: '',
					// state: '',
					// isDetele: ''
				}

			};
		},
		onLoad(option) {
			console.log('option.id:',option.id)
			this.id = option.id
			 this.fetchLeaveDetail(this.id)
			// const {
			// 	id
			// } = option;
			// this.fetchLeaveDetail(id);
		},
		methods: {
			changeState(isDetele){
				var myState = isDetele ===2?1:2
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/leaveManagement',
					method: 'PUT',
					data:{
						id:this.id,
						isDetele:myState
					},
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {

								this.leaveInfo.isDetele = myState

							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			
			fetchLeaveDetail() {

				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/leaveManagement/' +this.id,
					// url: 'https://www.gzzyue.com/prod-api/system/leaveManagement/' + id,
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {

								this.leaveInfo = res.data.data

							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.askfor-detail-container {
		padding: 10px;

		// border: 1px solid #000;
		// border-radius: 5px;
		.detail {
			.title {
				margin-top: 10px;
			}

			.info {
				font-size: 13px;
				color: orange;
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info-item {
					margin-bottom: 5px;
				}
			}

			.stauts {
				margin-top: 10px;
			}
		}

		.content {
			margin-top: 10px;
		}

		.image {
			margin-top: 10px;
			margin-left: 50px;
		}
	}
</style>
